import Input from '@/components/Input';
import NavBar from '@/components/NavBar';
import styles from './index.module.scss';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import { useDispatch } from 'react-redux';
import { Toast } from 'antd-mobile';
import { LoginActionCreator, userActionCreator } from '@/store/action/user';
import { useEffect, useRef, useState } from 'react';
import { useHistory, useLocation } from 'react-router';

/**
 *
 * token存放Redux
 * 1.reducer中定义Action类型
 * 2.定义个存储token的同步Action
 * 3.通过dispatch触发Action
 * 4.reducer处理保存token计算
 */

export default function Login() {
  const history = useHistory();
  // 🔔注意：useLocation 传入的泛型用于指定 state 对象格式
  const location = useLocation<{ form: string }>();
  const dispatch = useDispatch();
  // 发送验证码倒计时
  const [time, setTime] = useState(0);
  const timerId = useRef(-1);

  const handleSendCode = async () => {
    // console.log(formik.errors.mobile);

    if (time > 0) return;

    // 手机号校验错误
    if (formik.errors.mobile)
      return Toast.show({ content: formik.errors.mobile });
    // 调用action
    await dispatch(userActionCreator(formik.values.mobile));

    // 成功提示
    Toast.show({ content: '获取验证码成功', duration: 1000 });

    // 获取回跳页面
    const target = location.state ? location.state.form : '/';
    // 跳转页面
    history.push(target);

    // 开启倒计时
    setTime(60);

    timerId.current = window.setInterval(() => {
      // 定时器是异步的，要用箭头函数
      setTime((time) => {
        // 当时间等于1时，清除定时器，为什么是一，因为下面还要减一
        if (time === 1) clearInterval(timerId.current);
        return time - 1;
      });
    }, 1000);
  };

  useEffect(() => {
    return () => {
      // 组件卸载清理定时器
      clearInterval(timerId.current);
    };
  }, []);

  type FormValues = {
    mobile: string;
    code: string;
  };
  const formik = useFormik({
    initialValues: {
      mobile: '13511111111',
      code: '',
    } as FormValues,
    onSubmit: async (values) => {
      // console.log(values);
      await dispatch(LoginActionCreator(values));
      // 登陆成功提示
      Toast.show({ content: '登录成功' });
      // 跳转首页
      // 获取回跳页面，若没有则跳转首页
      const target = location.state ? location.state.form : '/';
      // 跳转页面
      history.push(target);
      // history.push('/');
    },

    // 表单校验
    // validate(values) {
    //   // 添加断言，
    // 1.在validate函数中，定义空errors对象
    //   const errors = {} as FormValues;

    // 2.校验手机号是否正确，不正确就给errors添加mobile的错误信息
    //   if (!/^1[3-9]\d{9}$/.test(values.mobile)) {
    //     errors.mobile = '手机号格式错误';
    //   }

    //   if (!/^\d{6}$/.test(values.code)) {
    //     errors.code = '验证码格式错误';
    //   }

    // 如果数据合格，则返回空对象
    //   return errors;
    // },

    // Yup表单校验
    validationSchema: Yup.object().shape({
      // 手机号校验
      mobile: Yup.string()
        .required('必填项')
        .matches(/^1[3-9]\d{9}$/, '手机号格式错误'),
      // 验证码校验
      code: Yup.string()
        .required('必填项')
        .matches(/^\d{6}$/, '验证码格式错误'),
    }),
  });
  return (
    <div className={styles.root}>
      <NavBar>登录</NavBar>
      <div className="content">
        {/* 标题 */}
        <h3>短信登录</h3>
        <form onSubmit={formik.handleSubmit}>
          {/* 手机号输入框 */}
          <div className="input-item">
            <Input
              // antoFocus
              className="input"
              placeholder="请输入手机号"
              autoComplete="off"
              type="text"
              name="mobile"
              maxLength={11}
              errorMsg={formik.touched.mobile ? formik.errors.mobile : ''}
              onBlur={formik.handleBlur}
              value={formik.values.mobile}
              onChange={formik.handleChange}
            />
          </div>
          {/* 短信验证码输入框 */}
          <div className="input-item">
            <Input
              className="input"
              placeholder="请输入验证码"
              autoComplete="off"
              type="text"
              name="code"
              maxLength={6}
              errorMsg={formik.touched.code ? formik.errors.code : ''}
              onBlur={formik.handleBlur}
              extra={
                <span onClick={() => handleSendCode()}>
                  {time === 0 ? '获取验证码' : `${time}秒后重试`}
                </span>
              }
              value={formik.values.code}
              onChange={formik.handleChange}
            />
          </div>

          {/* 登录按钮 */}
          <button
            type="submit"
            className="login-btn"
            disabled={!formik.isValid}
          >
            登录
          </button>
        </form>
      </div>
    </div>
  );
}
